<template>
  <ComWrapper>
    <el-row :gutter="15">
			<el-col :lg="8">
				<el-card shadow="never">
					<Base />
				</el-card>
			</el-col>
			<el-col :lg="8">
				<el-card shadow="never">
					<CustomLabel />
				</el-card>
			</el-col>
			<el-col :lg="8">
				<el-card shadow="never">
					<Donut />
				</el-card>
			</el-col>
			<el-col :lg="8">
				<el-card shadow="never">
					<Interaction />
				</el-card>
			</el-col>
			<el-col :lg="8">
				<el-card shadow="never">
					<LegendInteraction />
				</el-card>
			</el-col>
			<el-col :lg="8">
				<el-card shadow="never">
					<Ranged />
				</el-card>
			</el-col>
		</el-row>
  </ComWrapper>
</template>

<script setup>
import {defineAsyncComponent} from 'vue'

const Base = defineAsyncComponent(() => import('./components/base'))
const CustomLabel = defineAsyncComponent(() => import('./components/custome-label'))
const Donut = defineAsyncComponent(() => import('./components/donut'))
const Interaction = defineAsyncComponent(() => import('./components/interaction'))
const LegendInteraction = defineAsyncComponent(() => import('./components/legend-interaction'))
const Ranged = defineAsyncComponent(() => import('./components/ranged'))
</script>
